<template>
  <div>
    <a-space>
      <a-button type="text" @click="visible = true">简单弹窗</a-button>
      <a-button type="text" @click="visible2 = true">去除mask遮罩</a-button>
      <a-button type="text" @click="open">方法打开</a-button>
      <a-button type="text" @click="close">方法关闭</a-button>
      <a-button type="text" @click="visible3 = true">自定义关闭</a-button>
      <a-button type="text" @click="open2">方法：打开/关闭时回调</a-button>
      <a-button type="text" @click="visible4 = true">自定义打开/关闭时触发回调</a-button>
      <a-button type="text" @click="visible5 = true">关闭前回调</a-button>
      <a-button type="text" @click="visible6 = true">可拖拽</a-button>
    </a-space>
    <vc-modal
      v-model="visible"
      title="简单弹窗"
      content="简单弹窗content,且居中展示"
      centered
    ></vc-modal>
    <vc-modal v-model="visible2" title="去除mask遮罩" :mask="false">去除mask遮罩content</vc-modal>
    <vc-modal ref="modalRef" title="方法调用" :mask="false">方法调用content</vc-modal>
    <vc-modal v-model="visible3" title="自定义关闭" :closable="false">
      <span>自定义关闭content</span>
      <template #footer>
        <a-space>
          <a-button @click="visible3 = false">取消</a-button>
          <a-button type="primary" @click="visible3 = false">确定</a-button>
        </a-space>
      </template>
    </vc-modal>
    <vc-modal ref="modalRef2" title="方法：打开/关闭时回调" @open="afterOpen" @close="afterClose">
      <span>打开/关闭时回调content</span>
      <template #footer>
        <a-button @click="close2">取消</a-button>
      </template>
    </vc-modal>
    <vc-modal
      v-model="visible4"
      title="自定义打开/关闭时回调"
      @open="afterOpen"
      @close="afterClose"
    >
      <span>自定义打开/关闭时回调content</span>
      <template #footer>
        <a-button @click="visible4 = false">取消</a-button>
      </template>
    </vc-modal>
    <vc-modal
      v-model="visible5"
      title="关闭前回调"
      content="关闭前回调content"
      :beforeClose="beforeClose"
    ></vc-modal>
    <vc-modal
      v-model="visible6"
      title="可拖拽弹窗"
      content="可拖拽弹窗content"
      :draggable="true"
    ></vc-modal>
  </div>
</template>

<script setup>
  const visible = ref(false);
  const visible2 = ref(false);
  const visible3 = ref(false);
  const visible4 = ref(false);
  const visible5 = ref(false);
  const visible6 = ref(false);
  const modalRef = ref(null);
  const open = () => {
    modalRef.value.open();
  };
  const close = () => {
    modalRef.value.close();
  };
  const modalRef2 = ref(null);
  const open2 = () => {
    modalRef2.value.open();
  };
  const close2 = () => {
    modalRef2.value.close();
  };
  const afterOpen = () => {
    console.log('已经打开！');
  };
  const afterClose = () => {
    console.log('已经关闭！');
  };
  const beforeClose = () => {
    console.log('即将关闭');
  };
</script>

<style lang="less" scoped></style>
